<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'

const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>

<template>
  <div class="welcome-container">
    <h1 class="welcome-title">欢迎使用智能应用系统</h1>
    <p class="welcome-subtitle">基于Vue 3 + Element Plus的现代化前端应用</p>
    
    <div class="welcome-grid">
      <WelcomeItem>
        <template #icon>
          <DocumentationIcon />
        </template>
        <template #heading>文档说明</template>
        Vue的
        <a href="https://vuejs.org/" target="_blank" rel="noopener">官方文档</a>
        为您提供开始所需的所有信息。
      </WelcomeItem>

      <WelcomeItem>
        <template #icon>
          <ToolingIcon />
        </template>
        <template #heading>开发工具</template>
        此项目使用
        <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>
        进行构建和打包。推荐的IDE设置是
        <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
        +
        <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue官方插件</a>。
        更多说明请查看
        <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a>。
      </WelcomeItem>

      <WelcomeItem>
        <template #icon>
          <EcosystemIcon />
        </template>
        <template #heading>生态系统</template>
        为您的项目获取官方工具和库：
        <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>、
        <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>、
        <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>等。
      </WelcomeItem>

      <WelcomeItem>
        <template #icon>
          <CommunityIcon />
        </template>
        <template #heading>社区支持</template>
        遇到问题？请在
        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
        （我们的官方Discord服务器）提问，或访问
        <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener">StackOverflow</a>。
      </WelcomeItem>

      <WelcomeItem>
        <template #icon>
          <SupportIcon />
        </template>
        <template #heading>支持Vue</template>
        作为一个独立项目，Vue依赖社区支持来维持其可持续性。您可以通过
        <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">成为赞助商</a>
        来帮助我们。
      </WelcomeItem>
    </div>
  </div>
</template>

<style scoped>
.welcome-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.welcome-title {
  text-align: center;
  color: #303133;
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 600;
}

.welcome-subtitle {
  text-align: center;
  color: #606266;
  font-size: 18px;
  margin-bottom: 40px;
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .welcome-grid {
    grid-template-columns: 1fr;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .welcome-subtitle {
    font-size: 16px;
  }
}
</style>
